<template>
    <div>
        <p>conter</p>
        <p>这是一个编程式导航---点击数字进行跳转</p>
        <ul>
            <!-- 使用@click 进行路由跳转 -->
            <li v-for="data in datalist" :key=data @click="handle(data)">
                {{data}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      datalist: ['111', '222', '333']
    }
  },
  methods: {
    handle (id) {
      // location.href = "#/datail"  //更改网址，不建议

      // 路由自带的方法能够自动自动检测模式，并进行跳转；
      // this.$router返回一个router大对象，记录这index文件中的数据； .back()  --返回上一页
      this.$router.push(`/datail/${id}`) // 注意那不是单引号  这个~

      // 命名路由的跳转
      // this.$router.push({
      //     name: 'mydatail',
      //     // 参数
      //     params:{
      //         myid: id
      //     }
      // })
    }
  }
}
</script>
